<template>
  <d2-container>
    <template>
      <el-button slot="header" style="margin-bottom: 5px" @click="change">新 增</el-button>
      <el-table
          :data="tableData"
          style="width: 100%" >
          <el-table-column
            type="index"
            label="序号"
            width="50">
          </el-table-column>
          <el-table-column
            prop="riskValue"
            label="风险值"
            >
          </el-table-column>
          <el-table-column
            prop="source"
            label="风险来源"
            >
          </el-table-column>
          <el-table-column
            prop="type"
            label="风险类型" >
          </el-table-column>
          <el-table-column
            prop="isValid"
            label="是否失效">
            <template slot-scope="scope">
            <el-tag
              :type="scope.row.isValid === 1 ? 'primary' : 'success'"
              disable-transitions
            >{{scope.row.isValid==0?"无效":"有效"}}</el-tag>
          </template>
          </el-table-column>
          <el-table-column
            prop="invalidTime"
            label="失效时间" :formatter="forDate">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间" :formatter="forDate">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="deleteRow(scope.$index, tableData)"
                type="text"
                size="small">
                移除
              </el-button>
              <el-button type="text" size="small" @click="updateRow(scope.row.id)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
       
    </template>
    <template>
      <div>
          <keep-alive>
              <addPage :addPage="addComponent" @on-addPage-change="onAddPageChange" @on-loadlist-change="fetchData" ></addPage>
            </keep-alive>
      </div>
      <div>
          <keep-alive>
              <updatePage @on-loadlist-change="fetchData"  :uShow="updateComponent" @on-uShow-change="onUShowChange" :uId="updateId" @on-id-change="onIdChange"></updatePage>
            </keep-alive>
      </div>
    </template>
  </d2-container>
</template>

<script>
import { Blacklist,DelBlacklist } from '@api/blacklist/blacklist'
import addPage from './add'
import updatePage from './update'
import dayjs from 'dayjs'

export default {
  name: 'system-route',
  components: {
    addPage,updatePage
  },
   data () {
    return {
      addComponent: false,
      updateComponent: false,
      updateId:'',
      tableData: [],
      multipleSelection: []
    }
  },
 
  mounted () {
    this.fetchData()
  },
  methods: {
    /**双向绑定 start */
   change() {
     this.addComponent = !this.addComponent
    },
    onAddPageChange(val){
     this.addComponent=val;//④外层调用组件方注册变更方法，将组件内的数据变更，同步到组件外的数据状态中
    },
    uChange(){
      this.updateComponent=!this.updateComponent
    },
    onUShowChange(val){
      this.updateComponent=val//④外层调用组件方注册变更方法，将组件内的数据变更，同步到组件外的数据状态中
    },
    idChange(val){
      this.updateId = val;
    },
    onIdChange(val){
      this.updateId=val//④外层调用组件方注册变更方法，将组件内的数据变更，同步到组件外的数据状态中
    },
    /**双向绑定 end */
   
    fetchData () {
      this.loading = true
      Blacklist().then(res => {
        this.tableData = res.data.content
        this.loading = false
      }).catch(err => {
        console.log('err', err)
        this.loading = false
      })
    },
    deleteRow(index, rows) {
       //console.log( rows[index].id)
        //rows.splice(index, 1)
        
        this.$confirm('确定删除吗').then(() => {
          let id = rows[index].id;
          this.loading = true
          DelBlacklist({blackListId:id}).then(res=>{
            this.fetchData()
            this.loading = false
          }).catch(err=>{
            console.log('err', err)
            this.loading = false
          })      // function(done)，done 用于关闭 Dialog
           done();
        }).catch(() => {
           // console.log("取消操作");
        });
    },
    updateRow(id){
      this.uChange()
      this.idChange(id)
    },
    forDate(row, column){
      return row.createTime==null?"":dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>
